<template>
	<view class="page-body" v-if="showPage">
		<view class="orderInfo">
			<view class="orderInfo_top" v-for="item in order_info" :key="item.id">
				<image :src="item.goodImg" class="order_track_img leftfloat"></image>
				<view class="orderInfo_right">
					<view>
						<text class="orderInfo_right_name">{{item.goodName}}</text>
						<text class="orderInfo_right_price">¥{{item.payPrice}}</text>
					</view>
					<view class="order_num">x{{item.num}}</view>
					<view>
						<text class="order_count">20片</text>
					</view>
				</view>
			</view>
			<view class="orderInfo_bottom">
				<view class="bottom_row">
					订单编号：
					<text>{{orderNo}}</text>
				</view>
				<view class="bottom_row"> 
					下单时间：
					<text>{{createTime}}</text>
				</view>
				<view class="bottom_row">
					{{expName}}快递单号：
					<text >{{number}}</text>
				</view>
			</view>
		</view>
		
		<view class="ogistics_tracking">
			<view class="ogistics_tracking_row1">
				<text>物流跟踪</text>
			</view>
			<view class="ogistics_tracking_row2">
				<view ></view>
				<view ></view>
				<view class="row2_01 leftfloat">
					<text class="row2_01_left leftfloat" v-if="sendGoods">待发货</text>
					<view class="row2_01_middle leftfloat" v-if="transport">运输中</view>
					<text class="row2_01_right rightfloat" v-if="sign">{{signText}}</text> 
				</view>
				<view class="row2_02 leftfloat">
					<text class="row2_02_left leftfloat" v-if="sendGoods"></text>
					<view class="line leftfloat" v-if="transport"></view>
					<view class="row2_02_left leftfloat" v-if="transport"></view>
					<view class="line2 leftfloat" v-if="sign"></view>
					<text class="row2_02_left rightfloat" v-if="sign"></text> 
				</view>
				<view class="row2_03 leftfloat">
				    <text v-if="sendGoods">{{startAddress}}</text>
					<text class="rightfloat" v-if="sign">{{endAddress}}</text>
				</view>
			</view>
		</view>
		
		<view class="ogistics_time">
			<view class="ogisticsListData">
				<view style="width:40%;">
					<view class="ogisticsListData_letf" v-for="(items,index) in expTime" :key="index">
						<text>{{items[1]}}</text>
						<text>{{items[0]}}</text>
						<text class="ogline" v-if="items.index>index"></text>
					</view>
				</view>
				<view style="width:60%;margin-left:30upx;">
					<view class="ogisticsListData_right" v-for="(items,index) in expStatus" :key="index">
						<text>{{items}}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {	
				//快递单号
				number:"",
				//下单时间
				createTime:"",
				//快递名称
				expName:"",
				expTime:[],
				expStatus:[],
				//发货地址
				startAddress:"",
				//签收地址
				endAddress:"",
				//快递公司编码
				shipCompany:"",
				//快递单
				shipNumber:"",
				//订单编号
				orderNo:"",
				//订单ID
				orderInfoID:"",
				order_info:[],
				orderInfo:"",
				sendGoods:false,
				transport:false,
				sign:false,
				signText:"",
				isActive:true,
				showPage:false
			}
		},
		methods: {
			changeColor(index){
				if(index>0) {
					color: red;
				}
			},
			getLocalTime(nS) {  
               return new Date(parseInt(nS) * 1000).toLocaleString().replace(/:\d{1,2}$/,' ');  
            },
			getOrderTrack(){
				//数据加载提示框
				uni.showLoading({
					title: '拼命加载中',
					mask: true
				});
				let that=this;
				uni.request({
					url: this.$store.state.URL + '/order/express/get_order_express_info',
					data:{
						token: this.$store.state.token,
						orderID:that.orderInfoID
					},
					method:"GET",
					success(res) {
						uni.hideLoading();
						if(res.data.status==true){
							//显示页面
							that.showPage=true;
							//获取商品数据
							that.shipNumber=res.data.order_info.shipNumber;
							that.shipCompany=res.data.order_info.shipCompany;
							that.order_info=res.data.order_info.goods;
							that.orderNo=res.data.order_info.orderNo;
							//获取快递数据
							that.number=res.data.data.number
							that.createTime=that.getLocalTime(res.data.data.createTime)  
							that.expName=res.data.data.expName
							for(let i=0;i<res.data.data.list.length;i++){
								let time=res.data.data.list[i].time.split(" ")
								let status=res.data.data.list[i].status
							    that.expTime.push(time);
								that.expStatus.push(status);
								// that.expStatus[]
							}
							if(that.expStatus.length>1){
								let lenghtOne=that.expStatus.length
								let addressOne=that.expStatus[lenghtOne-1]
								let indexOne=addressOne.indexOf("市")
								that.startAddress=addressOne.substring(0,indexOne+1)
								let addressTwo=that.expStatus[0]
								let indexTwo=addressTwo.indexOf("市")
								that.endAddress=addressTwo.substring(0,indexOne+1)
							}
							//物流状态
							if(res.data.data.deliverystatus==0){
								that.sendGoods=true
							}
							if(res.data.data.deliverystatus==1){
								that.sendGoods=true
								that.transport=true
							}
							if(res.data.data.deliverystatus==2){
								that.sendGoods=true
								that.transport=true
								that.sign=true
								that.signText="正在派件"
							}
							if(res.data.data.deliverystatus==3){
								that.sendGoods=true
								that.transport=true
								that.sign=true
								that.signText="已签收"
							}
							if(res.data.data.deliverystatus==4){
								that.sendGoods=true
								that.transport=true
								that.sign=true
								that.signText="派送失败"
							}
							if(res.data.data.deliverystatus==5){
								that.sendGoods=true
								that.transport=true
								that.sign=true
								that.signText="疑难件"
							}
							if(res.data.data.deliverystatus==6){
								that.sendGoods=true
								that.transport=true
								that.sign=true
								that.signText="退件签收"
							}
						}else{
							uni.showToast({
								title:"该订单暂未发货",
								duration:3000,
								icon:"none"
							})
							setTimeout(function(){
								uni.navigateBack({
									delta:1
								})
							},1000)
						}
					}
				})			
			},
		},
		onLoad(options) {
			this.orderInfoID=options.orderInfoID;
			this.getOrderTrack();
			console.log(this.orderInfoID);
			console.log(this.$store.state.token);
		}
	}
</script>

<style>
.page-body{
	background-color: #F5F5F5;
	height: 1240upx;
}
.leftfloat{
	float: left;
}
.rightfloat{
	float: right;
}
.clean{
	clear: both;
}
.orderInfo{
	background: #FFFFFF;
	height: 373upx;
}
.orderInfo_top{
	width: 100%;
	height: 190upx;
	border-bottom:1rpx #e8e8e8 solid;

}
.order_track_img{
	width: 200upx;
	height: 150upx;
	float: left;
	margin: 20upx;
}
.orderInfo_right{
	position: absolute;
	left: 240upx;
	top: 20upx;
	font-size: 28upx;
}
.orderInfo_right_name {
	width: 350upx;
	margin-right: 20upx;
	margin-right: 50upx;
	float: left;
}
.orderInfo_right_price{
	width: 90upx;
	text-align: right;
	float: right;
}
.order_num{
	color: #B7B7B7;
	text-align: right;
}
.order_count{
	color: #B7B7B7;
	text-align: left;
	position: absolute;
	top: 100upx;
}
.orderInfo_bottom{
	width: 100%;
	height: 182upx;
	font-size: 28upx;
	color: #999999;
	margin-left: 20upx;
	margin-top: 20upx;
}
.bottom_row{
	padding: 5upx 0;
}
.orderInfo_bottom text{
	color: #333;
	font-size: 28upx;
}
.ogistics_tracking{
	width: 752upx;
	height: 224upx;
	background: #FFFFFF;
	margin-top: 20upx;
	font-size: 30upx;
	color: #222222;
}
.ogistics_tracking_row1{
	padding: 15upx;
	border-bottom: 1upx #e8e8e8 solid;
}
.ogistics_tracking_row2{
	width: 752upx;
	padding: 15upx 86upx;
	height: 130upx;
}
.row2_01{
	width: 575upx;
	height: 35upx;
	font-size: 26upx;
	padding: 5upx 0;
}
.row2_01_left{
	color: #F2526F;
}
.row2_01_middle{
	width: 400upx;
	color: #F2526F;
	text-align: center;
}
.row2_01_right {
	text-align: right;
	color: #B7B7B7;
} 
.row2_02{
	width: 575upx;
	height: 35upx;
	padding: 5upx 0;
}
.row2_02_left{
	width: 20upx;
	height: 20upx;
	border: 1upx #F2526F solid;
	border-radius: 100%;
	margin: 5upx 20upx;
}
.line{
	width: 180upx;
	height: 2upx;
	margin-top: 18upx;
	background: #F2526F;
}
.line2{
	width: 200upx;
	height: 2upx;
	margin-top: 18upx;
	background: #E0E0E0;
}
.row2_03{
	width: 575upx;
	height: 35upx;
	font-size: 24upx;
	padding: 5upx 0;

}
.ogistics_time{
	width: 752upx;
	margin-top: 20upx;
	height:auto;
	background:#FFFFFF;
	width:100%;
	font-size: 22upx;
}
.ogisticsListData{
	width: 100%;
	height: auto;
	display: flex;
	justify-content: space-between;
}
.ogisticsListData_letf{
	text-align: center;
	margin:40upx 0;
	margin-left:10upx;
	margin-right: 10upx;
	height:120upx;
}
.ogisticsListData_right{
	text-align: left;
	margin:40upx 0;
	margin-right: 10upx;
	height:120upx;
}
.ogisticsListData_letf text:nth-of-type(1){
	font-size:26upx;
	color: #222222;
	display: block;
	line-height: 50upx;
}
.ogisticsListData_letf text:nth-of-type(2){
	font-size:22upx;
	color:#b7b7b7;
	display: block;
}
.ogisticsListData_right text:nth-of-type(1){
	font-size:22upx;
	color: #222222;
	display: block;
	width: 80%;
	white-space:pre-wrap;
}
.ogline{
	height: 60upx;
	width:1upx;
	background:#b7b7b7;
	display: block;
	margin-left: 50%;
}
.activeText{
	color:#666666
}
</style>
